<template>
  <div id='borrowDetail'>
    <!-- <div v-title>项目详情</div> 变量detailType控制显示隐藏 -->
    <div class='biaotypeONE'>
      <div class='biaodetail'>
        <div class='year'>预期年化收益</div>
        <div class='yearnumber'>{{apr}}%
          <i v-show="israiserates==1">+{{raiserates}}%</i>
        </div>
      </div>
      <div class='biaoMoney'>
        <div class='contentGlass'>
          <div>投资期限({{isday}})</div>
          <div>{{timelimit}}</div>
        </div>
        <div class='contentGlass'>
          <div>还款方式</div>
          <div>到期还本付息</div>
        </div>
        <div class='contentGlass'>
          <div>起投金额</div>
          <div>{{lowestAccount}}</div>
        </div>
      </div>
      <div class='prossLine'>
        <div id='pross' :style='{width:num+"%"}'></div>
        <span class='point' id='point' :style='{left:num+"%"}'>
          <span>已售<br/>{{num}}%</span>
        </span>
      </div>
      <div class='biaoMoney'>
        <div class='contentGlass'>
          <div>剩余可投(元)</div>
          <div>{{accountRemain}}</div>
        </div>
        <span class='line'>
              <span></span>
              </span>
        <div class='contentGlass'>
          <div>融资规模(元)</div>
          <div>{{account}}</div>
        </div>
      </div>
      <div class='biaoListDetail'>
        <div>
          <span>投资</span>
          <span>开始计息</span>
          <span>回款</span>
        </div>
        <div>
                    <span>
                    <span class='pointB'></span>
                    <span class='pointLineL'></span>
                    </span>
          <span>
                    <span class='pointB'></span>
                    <span class='pointLineB'></span>
                    </span>
          <span>
                    <span class='pointB'></span>
                    <span class='pointLineR'></span>
                    </span>
        </div>
        <div>
          <span>现在投资</span>
          <span>满标次日</span>
          <span>到期回款</span>
        </div>
      </div>
      <div class="waitao">
        <div class="divwarpper1">
          <span>首</span>
          <span>一马当先</span>
          <span v-if="firstusermobile">{{firstusermobile}}</span>
          <span v-else>虚位以待</span>
          <span>奖励 <span>5.00元</span> 投资红包</span>
        </div>
        <div class="divwarpper1">
          <span>高</span>
          <span>一鸣惊人</span>
          <span v-if="maxmoneyusermobile">{{maxmoneyusermobile}}</span>
          <span v-else>虚位以待</span>
          <span v-if="maxmoney">目前榜首<span>{{maxmoney}}</span>元超过Ta抢 <span>20.00</span>元最高投资红包</span>
          <span v-else>目前还没人投资，投资最高的可获<span>20.00元</span> 投资红包</span>
        </div>
        <div class="divwarpper1">
          <span>尾</span>
          <span>一锤定音</span>
          <span v-if="lastusermobile">{{lastusermobile}}</span>
          <span v-else>虚位以待</span>
          <span>奖励 <span>10.00元</span> 投资红包</span>
        </div>
      </div>
      <div class="biaoListPro">
        <div class="list" @click="toXmxq">
          <img src="../../../static/assets/xmxq.png"  />
          <span>项目介绍</span>
          <img src="../../../static/assets/more.png" class="more"/>
        </div>
        <div class="list" @click="toAqbz">
          <img src="../../../static/assets/aqbz.png" />
          <span>安全保障</span>
          <img src="../../../static/assets/more.png" class="more"/>
        </div>
        <div class="list" @click="toTzjl">
          <img src="../../../static/assets/tzjl.png" />
          <span>投资记录</span>
          <img src="../../../static/assets/more.png" class="more"/>
        </div>
      </div>
    </div>
    <div>
    </div>
    <!-- 计算器 -->
    <div class="computed" v-show='computedFlag'>
      <div class='computedTitle'>
        收益计算器
        <i @click='showComputed'></i>
      </div>
      <div class='jisuan'>
        <input type="text" placeholder="投资金额" v-model.trim='touzimoney' id='touzimoney'>
        <span class='yuan'>元</span>
        <span class='jisuanday'>{{timelimit}}</span>
        <span class='ri'>{{isday}}</span>
        <i></i><i></i>
      </div>
      <div class='profits cf'>
        <span>预计收益(元)</span>
        <span>{{profits}}</span>
      </div>
    </div>
    <!-- 遮罩 -->
    <div class='mask' v-show='computedFlag||hongbaoflag||bankflag||inputflag'></div>
    <div class='mask' v-if='validata' style='z-index:11;' @click.stop=''></div>
    <div class='validataPop' v-if='validata' @click.stop=''>
      <div class='poptitle'>提示</div>
      <div class='popcontent'>{{validataContent}}</div>
      <div class='popBTN'>
        <span @click='closeValidataPop'>取消</span>
        <span @click='pathtoValidata'>{{validataBTNcontent}}</span>
      </div>
    </div>
    <div class='bottombarhidden'></div>
    <div class='bottombar'>
      <i @click.stop='showComputed'></i>
      <div v-if="loginFlag" v-show="loginFlag" class='notLogin'>
        <div @click="toLogin">请先登录</div>
      </div>
      <div v-else v-show="!loginFlag" class='bottombarContent'  :style='{background:detailStatus==2||detailStatus==3||detailStatus==5?"#9ed5f8":detailStatus==6?"#999":""}'>
        <div class="btn" >
          <img src="../../../static/assets/tobuy.png" alt="" />
          <input pattern="[0-9]*" type="text" :placeholder="'账户可用余额'+ usableMoney" class="investmentMoney" v-model="investmentMoney" />
          <div class="tobuy" @click.stop='tobuy'></div>
        </div>
      </div>
    </div>
    <!-- 红包 -->
      <div class='hongbaoGlass' v-show='hongbaoflag'>
        <div class='hongbaoTitle'>
          选择优惠券
          <span @click='closehongbao'>完成</span>
        </div>
        <div class='hongbaoBar'>
          <span @click='hongbao(1)'><i :class='[hongbaoBarFlag?"active":"normal"]'></i><span :class='[hongbaoBarFlag?"fontactive":""]'>红包</span></span>
          <span @click='hongbao(2)'><i :class='[!hongbaoBarFlag?"active":"normal"]'></i><span :class='[!hongbaoBarFlag?"fontactive":""]'>加息券</span></span>
          <i class='hongbaoline' :class='[!hongbaoBarFlag?"hongbaoline50":""]'></i>
        </div>
        <div class='buydetailHongbaolist'>
          <div class='hongbaodetail cf' v-for='(h,index) in hongbaolist' :key="index" :class='[h.status==0?"canUse":"noUse"]' @click='hongbaoclick(e,h.id,index)'>
            <!--    <div class='hiddenContent' style='display:none;'>{{h.remark}}</div> -->
            <div class='hongbaoNumber'>
              <div>{{hongbaoContent}}</div>
              <div>{{h.amount}}<span>元</span></div>
            </div>
            <div class='hongbaoNotice'>
              <!-- <div><i></i><span>除周周盈外产品</span></div> -->
              <div><i></i><span>红包有效期{{h.validTime}}天</span></div>
              <div><i></i><span>满{{h.userMoney}}元</span></div>
              <div><i></i><span>投资期限需大于{{h.timeLimit}}天</span></div>
            </div>
            <div class='hongbaoTime'>
              <span>有效期至{{h.time}}</span>
              <span>
                    <navigator url="">详情</navigator>
                </span>
            </div>
          </div>
          <div class='nohaveHongbao' v-show='hongbaolist.length==0'>
            <i></i>
            <div>当前没有优惠券</div>
          </div>
          <div class='hongbaoFoot' @click='nohongbao' v-show='hongbaolist.length>0'>
            <i></i>不使用优惠券
          </div>
        </div>
      </div>
    <!--支付信息   -->
      <div class='hongbaoGlass' v-show='bankflag'>
        <div class='bankTitle'>
          <i @click='closebankPop'></i>付款详情
        </div>
        <div class='bankList cf'>
          <span>投资金额</span>
          <span>{{codeval}}元</span>
        </div>
        <div class='bankList cf'>
          <span>余额支付</span>
          <!--<span v-if='hongbaoChargeContent==="选择优惠券"'>{{needBank?usableMoney:codeval}}元</span>-->
          <span>{{needBank?usableMoney:codeval-hongbaoCharge}}元</span>
        </div>
        <div class='bankList cf'>
          <span>优惠抵扣</span>
          <span>{{hongbaoChargeContent==='选择优惠券'?'0元':hongbaoChargeContent}}</span>
        </div>
        <div class='bankList cf'>
          <span style='color:#333333;'>还需银行卡支付</span>
          <span style='font-size:.4rem;color:#fd6721;'>{{needBank?codeval-usableMoney-hongbaoCharge:0}}元</span>
        </div>
        <!--<div class='chargeGlass cf'>
          <div class='chargeGlass-4 cf'>
            <i v-if='backname==招商银行' class='zhaoshang'></i>
            <i v-if='backname==工商银行' class='gongshang'></i>
            <i v-if='backname==光大银行' class='guangda'></i>
            <i v-if='backname==广发银行' class='guangfa'></i>
            <i v-if='backname==华夏银行' class='huaxia'></i>
            <i v-if='backname==建设银行' class='jianshe'></i>
            <i v-if='backname==民生银行' class='minsheng'></i>
            <i v-if='backname==农业银行' class='nongye'></i>
            <i v-if='backname==平安银行' class='pingan'></i>
            <i v-if='backname==浦发银行' class='pufa'></i>
            <i v-if='backname==兴业银行' class='xingye'></i>
            <i v-if='backname==邮政储蓄银行' class='youzheng'></i>
            <i v-if='backname==中国银行' class='zhongguo'></i>
            <i v-if='backname==中信银行' class='zhongxin'></i>
            <div class='chargeGlass-7'>
              <div class='chargeGlass-5'>{{backname}}
                &lt;!&ndash; <span>(尾号{{endnum}})</span> &ndash;&gt;
              </div>
              <div class='chargeGlass-6'>单笔最高{{singleAmount}}万，日累计{{dailyAmont}}万</div>
            </div>
          </div>
        </div>-->
        <div class='form-radio'>
          <i :class='[radioStyleFlag ? radioright : radioerror]' @click='radioChange'></i><span>我同意<span>《支付协议》</span></span>
        </div>
        <div class='slideArea' style='margin-top: .5rem;'>
          <div class='shield'>
            <i class='shield-1'></i>
            <span class='slideAreaText'>资金服务由第三方机构富友支付提供</span>
          </div>
        </div>
        <div class='buyBTN'>
          <div class='blueBTN' @click='tosubpassword'>确定</div>
        </div>
      </div>

    <!--交易密码-->
    <div class='dealPasswordInput' v-show='inputflag' @click='showdealpassword'>
      <div class='dealpasswordCloseAndTitle'>
        <i @click='dealpasswordClose'></i>
        <span>请输入交易密码</span>
      </div>
      <div class='inputflag cf'>
        <input type="password" maxlength="6" id='forinput' v-model.trim='inputval'>
        <div><span v-show='lengthwatcher > 0'></span></div>
        <div><span v-show='lengthwatcher > 1'></span></div>
        <div><span v-show='lengthwatcher > 2'></span></div>
        <div><span v-show='lengthwatcher > 3'></span></div>
        <div><span v-show='lengthwatcher > 4'></span></div>
        <div><span v-show='lengthwatcher > 5'></span></div>
      </div>
      <div class='forget' @click='todealpassword'>忘记密码?</div>
    </div>
    <form :action='formAddress' id='chargeSubmit' type='post'>
      <input type="hidden" name='ENCTP' id='form1'>
      <input type="hidden" name='FM' id='form2'>
      <input type="hidden" name='LOGOTP' id='form3'>
      <input type="hidden" name='MCHNTCD' id='form4'>
      <input type="hidden" name='VERSION' id='form5'>
    </form>
  </div>
</template>
<script>
  import ajax from '@/utils/ajax'
  import Toast from 'mpvue-toast'
  export default {
    data: function() {
      return {
        animation:{},
        biaoId:"",
        loginFlag:false,
        num: 0,
        datanomal: true,
        personnumber: 0,
        timelimit: '',
        apr: '',
        account: 0,
        accountRemain: 0,
        startTime: '',
        endTime: '',
        borrowName: '',
        lowestAccount: 0,
        repaymentWay: '',
        detailType: true,
        activenumber: 0,
        computedFlag: false,
        mostAccount: 0,
        detailStatus: -1,
        investmentMoney:"",
        //以下验证使用
        validata: false,
        validataContent: '',
        validataBTNcontent: '',
        errorIndexArray: '',
        soldout: false,
        isday: '天',
        jieshao: '',
        touzipage: 1,
        firstusermobile:'',
        lastusermobile:'',
        maxmoneyusermobile:'',
        maxmoney:'',
        touzipageflag: false,
        profits: '0.00',
        touzimoney: '',
        explain: '',
        attachment: '',
        israiserates:'',
        raiserates:'',
        xiangxiContent: {
          account: '',
          lowestAccount: '',
          apr: '',
          validTime: '',
          borrowFee: ''
        },
        usableMoney:0,
        banklist: [],
//            红包弹窗变量
        hongbaoflag: false,
        hongbaoBarFlag: true,
        hongbaolist: [],
        hongbaoContent: '红包',
        hongbaoSendId: 0,
        hongbaoChargeContent: '选择优惠券',
        hongbaoCharge: 0,
        // 支付详情
        radioStyleFlag:true,
        radioerror: 'radioerror', //radio不选
        radioright: 'radioright', //radio选中
        borrowId:-1,
        colorBTN:false,
        codeval:0,
        backname: '',
        endnum: '',
        singleAmount: '',
        dailyAmont: '',
        bankflag: false,
        inputflag: false,
        hongbaoindex: -1,
        needBank: false,
        inputval: '',
        formAddress: 'https://mpay.fuiou.com:16128/h5pay/payAction.pay'// http://www-1.fuiou.com:18670/mobile_pay/h5pay/payAction.pay
      }
    },
    watch: {
      touzimoney: function() {
        let $this = this
        if (this.touzimoney == '') {
          this.profits = '0.00'
          return false
        }
        ajax.request('/wap/borrow/expect_profit.html', {
          borrowId: $this.borrowId,
          tenderMoney: $this.touzimoney
        }, function(response) {
          if(response.data) {
            $this.profits = response.data.interest
          }
        })
      },
      inputval: function() {
        let $this = this
        let orderid=(new Date()).valueOf();
        if (this.inputval.length == 6) {
          let data = {}
          if ($this.hongbaoindex > -1) {
            data = {
              borrowId: $this.borrowId,
              payPassword: $this.inputval,
              tenderMoney: $this.codeval - $this.hongbaoCharge,
              source: 'h5',
              hongbaoId: $this.hongbaoSendId,
              orderid:orderid
            }
          } else {
            data = {
              borrowId: $this.borrowId,
              payPassword: $this.inputval,
              tenderMoney: $this.codeval,
              source: 'h5',
              orderid:orderid
            }
          }
          ajax.request('/wap/borrow/tender.html', data, function(response) {
            if (response.code == 0) {
              if (response.data.ENCTP) {
                $('#form1').val(response.data.ENCTP)
                $('#form2').val(response.data.FM)
                $('#form3').val(response.data.LOGOTP)
                $('#form4').val(response.data.MCHNTCD)
                $('#form5').val(response.data.VERSION)
                $('#chargeSubmit').submit()
              } else {
                TrackingIO.payment (orderid,$this.codeval,'CNY','yeepay');
//                $this.$router.push({
//                  path: '/success',
//                  query: {
//                    type: 7,
//                    find: $this.codeval,
//                    interest: $this.profits,
//                    borrowname: $this.borrowName
//                  }
//                })
              }
            } else {
              Toast(response.msg)
            }
          })
        }
        this.lengthwatcher = this.inputval.length
      }
    },
    methods: {
//      toXmxq(){
//        this.$router.push({
//          path: '/xmxq',
//          query: {
//            borrowId: this.biaoId
//          }
//        });
//      },
//      toAqbz(){
//        this.$router.push({
//          path: '/aqbz',
//          query: {
//            borrowId: this.biaoId
//          }
//        });
//      },
//      toTzjl(){
//        this.$router.push({
//          path: '/tzjl',
//          query: {
//            borrowId: this.biaoId
//          }
//        });
//      },
     /* toLogin(){
//            Toast('请先登录')
        this.$router.push('/login')
      },*/
      tobuy: function() {
        if(/^[0-9]*$/.test(this.investmentMoney) && this.investmentMoney!=""){
          if(parseInt(this.investmentMoney) < this.lowestAccount || parseInt(this.investmentMoney) > this.accountRemain){
            Toast('请输入正确的投资金额')
            return false
          }else{
            this.codeval = parseInt(this.investmentMoney)
          }
        }else{
          Toast('请输入正确的投资金额')
          return false
        }
        if (this.detailStatus == 2 || this.detailStatus == 3) {
          Toast('该标已售罄')
          return false
        }
        if (this.detailStatus == 5) {
          Toast('该标正在还款')
          return false
        }
        if (this.detailStatus == 6) {
          Toast('该标已还款')
          return false
        }
        /*let indexArray = []
        indexArray.push(sessionStorage.getItem('realname'))
        indexArray.push(sessionStorage.getItem('paypassword'))
        indexArray.push(sessionStorage.getItem('bankbind'))
        this.errorIndexArray = indexArray.indexOf('0')
        sessionStorage.setItem('borrowIndex', this.borrowId)
        if (this.errorIndexArray == 0) {
          this.validata = true
          this.validataContent = '您尚未通过实名认证'
          this.validataBTNcontent = '去认证'
        } else if (this.errorIndexArray == 1) {
          this.validata = true
          this.validataContent = '您尚未设置交易密码'
          this.validataBTNcontent = '去设置'
        } else if (this.errorIndexArray == 2) {
          this.validata = true
          this.validataContent = '您尚未绑定银行卡号'
          this.validataBTNcontent = '去绑定'
        } else{
          this.hongbao(1);
        }*/
        this.hongbao(1)
      },
      closeValidataPop: function() {
        this.validata = false
      },
      typeActiveOne: function() {
        this.activenumber = 0
      },
      typeActiveTwo: function() {
        this.activenumber = 1
      },
      typeActiveThree: function() {
        this.activenumber = 2
      },
      showComputed: function() {
        this.computedFlag = !this.computedFlag
      },
      /*todealpassword: function() {
        this.$router.push({
          path: '/dealpassword',
          query: {
            type: 0
          }
        })
      },*/
      tosubpassword: function() {
        this.bankflag = false
        this.inputflag = true
        this.$nextTick(function() {
          $('#forinput').focus()
        })
      },
      closebankPop: function() {
        this.bankflag = !this.bankflag
      },
      hongbaoclick: function(e, id, index) {
        let $this = this
        this.hongbaoSendId = id
        $(e.currentTarget).siblings().removeClass('checkActive')
        if ($(e.currentTarget).hasClass('noUse')) {
          Toast('该红包无法使用')
        } else {
          $(e.currentTarget).addClass('checkActive')
          $this.hongbaoindex = list
          $this.hongbaoCharge = parseInt($(e.currentTarget).find('.hongbaoNumber>div:eq(1)').text())
          $this.hongbaoChargeContent = '红包抵扣' + $(e.currentTarget).find('.hongbaoNumber>div:eq(1)').text()
        }
      },
      hongbao: function(index) {
        let $this = this
        if (index === 1) {
          this.hongbaoBarFlag = true
          this.hongbaolist = []
          ajax.request( '/wap/myhome/hongbao_list.html', {
            status: 0,
            tenderMoney: $this.codeval,
            borrowId: $this.borrowId
          }, function(response) {
            console.log(response)
            if(response.data.length > 0){
              $this.hongbaoflag = true
            }else{
              $this.tosub();
            }
            if (response.code == 0) {
              for (let i of response.data) {
                $this.hongbaolist.push(i)
              }
              $this.$nextTick(function() {
                if ($this.hongbaoindex > -1) {
                  $('.hongbaodetail').eq($this.hongbaoindex).addClass('checkActive')
                }
              })
            }
          })
        } else if (index === 2) {
          this.hongbaoBarFlag = false
          this.hongbaolist = []
        }
      },
      radioChange: function() {
        this.radioStyleFlag = this.radioStyleFlag === true ? false : true
      },
      showHand: function() {
        this.codeval = this.usableMoney
        $('#typeinput').blur()
      },
      tosub: function() {
        if (this.codeval > this.usableMoney) {
          this.needBank = true

        } else {
          this.needBank = false
        }
        this.bankflag = true
      },
      dealpasswordClose: function() {
        this.inputflag = !this.inputflag
        this.inputval = ''
      },
      showdealpassword: function() {
        $('#forinput').focus()
      },
      dealhongbao: function() {
        let $this = this
        if (this.codeval < this.lowestAccount) {
          Toast('投资金额需大于' + this.lowestAccount + '元')
          return false
        }
        ajax.request('/wap/myhome/hongbao_list.html', {
          status: 0,
          tenderMoney: $this.codeval,
          borrowId: $this.borrowId
        }, function(response) {
          if (response.code == 0) {
            for (let i of response.data) {
              $this.hongbaolist.push(i)
            }
            $this.$nextTick(function() {
              if ($this.hongbaoindex > -1) {
                $('.hongbaodetail').eq($this.hongbaoindex).addClass('checkActive')
              }
            })
          }
        })
        this.hongbaoflag = !this.hongbaoflag
      },
      closehongbao: function() {
        this.hongbaoflag = !this.hongbaoflag
        this.bankflag = !this.bankflag
        this.tosub();
      },
      nohongbao: function() {
        this.hongbaoflag = !this.hongbaoflag
        this.hongbaolist = []
        this.hongbaoindex = -1
        this.hongbaoChargeContent = '选择优惠券'
        this.bankflag = !this.bankflag
        this.tosub();
      }
    },
    mounted: function() {
      let $this = this
      /*if (this.$route.query.type === 'soldout') {
        this.soldout = true
      }*/
      /*this.loginFlag = !sessionStorage.getItem('isLogin') ? true:false;*/
      ajax.request('/wap/borrow/detail.html', {
        'borrow_id': $this.biaoId
      }, function(response) {
        console.log(response)
        $this.timelimit = response.data.validTime
        $this.apr = response.data.apr
        $this.account = response.data.account
        $this.accountRemain = response.data.accountRemain
        $this.israiserates = response.data.israiserates
        $this.raiserates = response.data.raiserates
        $this.personnumber = response.data.people
        $this.num = (($this.account - $this.accountRemain) / $this.account * 100).toFixed(2)
        $this.startTime = response.data.startTime
        $this.endTime = response.data.endTime
        $this.borrowId = response.data.borrowId
        $this.borrowName = response.data.borrowName
        $this.lowestAccount = response.data.lowestAccount
        $this.repaymentWay = response.data.repaymentWay
        $this.isday = response.data.isDay == 1 ? '天' : '月'
        $this.mostAccount = response.data.mostAccount
        $this.detailStatus = response.data.status
        $this.maxmoney = response.data.maxmoney?response.data.maxmoney:''
        $this.lastusermobile = response.data.lastusermobile ? (response.data.lastusermobile.substring(0,3)+'****'+response.data.lastusermobile.substring(7,11)):''
        $this.firstusermobile = response.data.firstusermobile? (response.data.firstusermobile.substring(0,3)+'****'+response.data.firstusermobile.substring(7,11)):''
        $this.maxmoneyusermobile = response.data.maxmoneyusermobile? (response.data.maxmoneyusermobile.substring(0,3)+'****'+response.data.maxmoneyusermobile.substring(7,11)):''
        $this.attachment = response.data.attachment
        $this.xiangxiContent.account = response.data.account
        $this.xiangxiContent.lowestAccount = response.data.lowestAccount
        $this.xiangxiContent.apr = response.data.apr
        $this.xiangxiContent.validTime = response.data.validTime
        $this.xiangxiContent.borrowFee = response.data.borrowFee
        $this.usableMoney = response.data.usable_money
      })
      ajax.request( '/wap/bank_list.html',{}, function(response) {
        if (response.code == 0) {
          for (let i of response.data) {
            $this.banklist.push(i)
          }
        }
      })
      ajax.request('/wap/myhome/card_list.html',{}, function(response) {
        if (response.code == 0) {
          $this.backname = response.data.bank_name
          $this.endnum = response.data.card_no.substring(response.data.card_no.lastIndexOf('*') + 1)
          $this.singleAmount = response.data.singleAmount
          $this.dailyAmont = response.data.dailyAmont
        }
      })
    },
    onLoad(){
      this.biaoId = this.$route.query.id

    }
  }
</script>
<style lang='less' scoped>
  .bottombarhidden {
    height: 1rem;
  }

  .rbanklist {
    font-size: 0;
    padding: .15rem 0;
    border-bottom: 1px dashed #999;
    i {
      width: .24rem;
      height: .24rem;
      float: left;
      margin-right: .1rem;
    }
    span:nth-of-type(1) {
      float: left;
      color: #6a6a6a;
      font-size: .24rem;
    }
    span:nth-of-type(2) {
      float: right;
      color: #888888;
      font-size: .24rem;
    }
  }

  .xiangxishuoming {
    padding: 0 .3rem;
    span:nth-of-type(1) {
      display: inline-block;
      color: #bebebe;
      font-size: .24rem;
      width: 1.9rem;
    }
  }

  .profits {
    font-size: 0;
    padding: 0 .3rem;
    margin-top: .35rem;
    span:nth-of-type(1) {
      color: #888888;
      font-size: .28rem;
      float: left;
    }
    span:nth-of-type(2) {
      font-size: .4rem;
      color: #fb4d4d;
      float: right;
    }
  }

  .tipslist {
    font-size: 0;
    background: #fff;
    border-bottom: 1px dashed #999;
    padding: .2rem 0;
    padding-left: .3rem;
    i {
      display: inline-block;
      width: .08rem;
      height: .2rem;
      background: #44b2f7;
      margin-right: .08rem;
    }
    span {
      color: #6a6a6a;
      font-size: .28rem;
    }
  }

  .detailimg {
    img {
      width: 100%;
    }
  }


  .jisuan {
    margin-top: .4rem;
    border-bottom: 1px dashed #999;
    position: relative;
    font-size: 0;
    padding: 0 .3rem .4rem .3rem;
    input {
      display: inline-block;
      width: 1.5rem;
      height: .76rem;
      font-size: .28rem;
      border: 1px solid #cacaca;
      padding-left: .76rem;
      vertical-align: middle;
    }
    i:nth-of-type(1) {
      display: inline-block;
      width: .36rem;
      height: .34rem;
      background: url('../../../static/assets/smallmoney.png') no-repeat 50% 50%;
      background-size: 100%;
      position: absolute;
      top: .2rem;
      left: .4rem;
    }
    i:nth-of-type(2) {
      display: inline-block;
      width: .36rem;
      height: .34rem;
      background: url('../../../static/assets/smalldate.png') no-repeat 50% 50%;
      background-size: 100%;
      position: absolute;
      top: .2rem;
      right: 2.75rem;
    }
    .yuan {
      font-size: .26rem;
      color: #333333;
      vertical-align: middle;
      margin-left: .15rem;
      margin-right: .45rem;
    }
    .jisuanday {
      display: inline-block;
      line-height: .76rem;
      width: 1.5rem;
      height: .76rem;
      font-size: .28rem;
      border: 1px solid #cacaca;
      padding-left: .76rem;
      vertical-align: middle;
    }
    .ri {
      font-size: .26rem;
      color: #333333;
      vertical-align: middle;
      margin-left: .15rem;
    }
  }

  .biaodetail {
    height: 2.26rem;
    position: relative;
    background: rgb(67,178,247);
    font-size: 0;
    i.active {
      display: inline-block;
      height: .46rem;
      width: 1.1rem;
      background: url(../../../static/assets/noobVIP.png) no-repeat 50% 50%;
      background-size: 100%;
      position: absolute;
      right: .3rem;
      top: 0;
    }
    i.active2 {
      display: inline-block;
      height: .46rem;
      width: 1.1rem;
      background: url(../../../static/assets/hot.png) no-repeat 50% 50%;
      background-size: 100%;
      position: absolute;
      right: .3rem;
      top: 0;
    }
    .year {
      font-size: .26rem;
      color: #fff;
      text-align: center;
      padding: .8rem 0 .4rem 0;
    }
    .yearnumber {
      font-size: .65rem;
      color: #fff;
      text-align: center;
      margin-left: -.1rem;
      i{
        font-style: normal;
      }
    }
  }

  .mg20 {
    margin-top: .2rem;
  }

  #borrowDetail {
    height: 100%;
  }

  .detailbarContent {
    padding: .2rem .3rem;
    background: #fff;
    font-size: .26rem;
    .touzili {
      font-size: 0;
      border-bottom: 1px dashed #999;
      height: .9rem;
      div {
        display: inline-block;
        font-size: .26rem;
        width: 50%;
        height: .9rem;
        vertical-align: top;
        color: #414042;
      }
      div:nth-of-type(1) {
        line-height: 1.5;
        span:nth-of-type(2) {
          font-size: .2rem;
          color: #888888;
        }
      }
      div:nth-of-type(2) {
        line-height: .9rem;
        text-align: right;
        color: #414042;
        font-size: .26rem;
      }
    }
    button {
      display: block;
      width: 2rem;
      height: .5rem;
      margin: 0 auto;
      color: #6a6a6a;
      font-size: .26rem;
      background: #fff;
      border-bottom: 1px solid #d5d5d5;
      border-radius: 10px;
    }
  }

  .detailbar {
    background: #fff;
    font-size: 0;
    position: relative;
    span {
      display: inline-block;
      width: 33.33%;
      font-size: .3rem;
      text-align: center;
      color: #888888;
      margin: .3rem 0;
      border-right: 1px solid #888;
    }
    .active {
      color: #44b2f7;
    }
    span:last-child {
      border: none;
    }
    i {
      display: inline-block;
      width: 33.33%;
      height: .02rem;
      background: #44b2f7;
      position: absolute;
      bottom: 0;
      transition: left .5s;
    }
    .active-1 {
      left: 0;
    }
    .active-2 {
      left: 33.33%;
    }
    .active-3 {
      left: 66.66%;
    }
  }

  .computed {
    /*display: inline-block;*/
    width: 6.8rem;
    height: 3.8rem;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -1.9rem;
    margin-left: -3.4rem;
    z-index: 6;
    border-radius: 10px;
    .computedTitle {
      text-align: center;
      font-size: .32rem;
      color: #666666;
      padding: .3rem 0;
      position: relative;
      i {
        float: right;
        width: .4rem;
        height: .4rem;
        background: url(../../../static/assets/dealpasswordClose.png) no-repeat 50% 50%;
        background-size: 100%;
        position: absolute;
        top: .28rem;
        right: .3rem;
      }
    }
  }

  .mask {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .4;
    top: 0;
    left: 0;
    z-index: 5;
  }

  .slideArea {
    font-size: 0;
    .arrow {
      text-align: center;
      padding: .2rem 0 .07rem 0;
      i {
        display: inline-block;
        width: .27rem;
        height: .26rem;
        background: url(../../../static/assets/arrow.png) no-repeat 50% 50%;
        background-size: 100%;
        transition: transform .5s;
      }
      .arrowTransform {
        transform: rotate(180deg);
      }
    }
    .shield {
      text-align: center;
      .line-1 {
        display: inline-block;
        width: 1.5rem;
        border-bottom: 1px solid #dcdcdc;
        margin-top: -.1rem;
        height: .1rem;
        margin-right: .37rem;
      }
      .line-2 {
        display: inline-block;
        width: 1.5rem;
        border-bottom: 1px solid #dcdcdc;
        margin-top: -.1rem;
        height: .1rem;
        margin-left: .37rem;
      }
      .shield-1 {
        display: inline-block;
        width: .27rem;
        height: .3rem;
        background: url(../../../static/assets/shield.png) no-repeat 50% 50%;
        background-size: 100%;
        vertical-align: middle;
        margin-right: .1rem;
        position: relative;
        bottom: .02rem;
      }
      .slideAreaText {
        font-size: .26rem;
        color: #b1b1b1;
        vertical-align: middle;
      }
    }
  }

  .prossLine {
    height: 1px;
    background: #fff;
    position: relative;
    #pross{
      position: absolute;
      left: 0;
      height: 100%;
      top: 0;
      width: 0;
      transition: width 1s;
      background:#6cb8ec;
    }
    .point {
      background: #44b2f7;
      height: .15rem;
      width: .15rem;
      border-radius: 50%;
      position: absolute;
      top: -.05rem;
      left: 0;
      transition: left 1s;
      z-index: 1;
      span {
        display: inline-block;
        width: .8rem;
        height: .5rem;
        background: #6cb8ec;
        color: #fff;
        font-size: .16rem;
        text-align: center;
        border-radius: .1rem;
        position: absolute;
        bottom: .2rem;
        right: -.4rem;
      }
    }
  }

  .biaoMoney {
    font-size: 0;
    background: rgb(67,178,247);
    text-align: center;
    height: 1.5rem;
    color:#fff;
    .contentGlass {
      width: 2rem;
      display: inline-block;
      vertical-align: top;
      height: 1.16rem;
      div:nth-of-type(1) {
        /*color: #adb2b7;*/
        font-size: .24rem;
        padding: .26rem 0 .19rem 0;
      }
      div:nth-of-type(2) {
        /*color: #6a6a6a;*/
        font-size: .24rem;
      }
    }
    span.line {
      display: inline-block;
      vertical-align: top;
      width: .6rem;
      text-align: center;
      height: 1.14rem;
      position: relative;
      margin-top: .01rem;
      span {
        width: 1px;
        background: #dadada;
        display: inline-block;
        height: .52rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  .validataPop {
    width: 5.4rem;
    height: 2.5rem;
    background: #f8f8f9;
    border-radius: 40px;
    position: absolute;
    z-index: 11;
    top: 50%;
    left: 50%;
    margin-top: -1.25rem;
    margin-left: -2.7rem;
    overflow: hidden;
    font-size: 0;
    .poptitle {
      margin-top: .45rem;
      font-size: .32rem;
      font-weight: bold;
      color: #000;
      text-align: center;
    }
    .popcontent {
      margin-top: .1rem;
      font-size: .24rem;
      color: #000;
      text-align: center;
    }
    .popBTN {
      height: .88rem;
      border-top: 1px solid #d6d6de;
      position: absolute;
      width: 100%;
      bottom: 0;
      span {
        display: inline-block;
        width: 50%;
        height: 100%;
        line-height: .88rem;
        font-size: .32rem;
        text-align: center;
        color: #007aff;
      }
      span:first-child {
        border-right: 1px solid #d6d6de;
      }
    }
  }

  .bottombar {
    height: 1rem;
    background: #44b2f7;
    color: #fff;
    position: fixed;
    bottom: 0;
    width: 100%;
    font-size: 0;
    max-width: 980px;
    i {
      display: inline-block;
      height: 1rem;
      position: absolute;
      left: 0;
      top: 0;
      width: 1rem;
      background: #36a2eb url(../../../static/assets/calculator.png) no-repeat 47% 50%;
      background-size: 70%;
    }
    .notLogin{
      display: block;
      height: 100%;
      color: #fff;
      div{
        font-size: .36rem;
        text-align: center;
        height: 1rem;
        line-height: 1rem;
      }
    }
    .bottombarContent {
      display: block;
      color: #fff;
      margin-left: 1.5rem;
      .btn{
        position: relative;
        font-size: .36rem;
        height: 1rem;
        line-height: 1rem;
        img{
          margin-top: .15rem;
          width: 5.72rem;
          height: .71rem;
        }
        input{
          position: absolute;
          top:.15rem;
          left: .15rem;
          width: 4rem;
          height:.7rem ;
          font-size: .3rem;
          background: rgba(0,0,0,0);
          color:rgb(32,151,225);
          border: none;
          border-radius: .05rem;
          &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
            color:rgb(32,151,225);
          }
          &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color:rgb(32,151,225);
          }
          &::-moz-placeholder { /* Mozilla Firefox 19+ */
            color:rgb(32,151,225);
          }
          &:-ms-input-placeholder { /* Internet Explorer 10-11 */
            color:rgb(32,151,225);
          }
        }
        .tobuy{
          position: absolute;
          top:.15rem;
          right: .3rem;
          width: 1.5rem;
          height:.7rem ;
          border: none;
          background: rgba(0,0,0,0);
          border-radius: .05rem;
        }
      }
    }
    .blackBG {
      background: #999999 !important;
    }
  }

  .biaoListDetail {
    background: #fff;
    text-align: center;
    font-size: 0;
    margin-top: .18rem;
    border-bottom: 1px solid #d9d9d9;
    >div:nth-of-type(1) {
      padding-top: .5rem;
      display: inline-block;
      width: 5.55rem;
      span {
        font-size: .26rem;
        color: #bebebe;
        display: inline-block;
        width: 33.33%;
        height: 100%;
      }
      span:nth-of-type(1) {
        text-align: left;
      }
      span:nth-of-type(2) {
        text-align: center;
      }
      span:nth-of-type(3) {
        text-align: right;
      }
    }
    >div:nth-of-type(2) {
      span {
        display: inline-block;
        width: 33.33%;
        height: .4rem;
        position: relative;
        .pointB {
          display: inline-block;
          width: .15rem;
          height: .15rem;
          border-radius: 50%;
          position: absolute;
          top: 50%;
          left: 50%;
          background: #e0e0e0;
          transform: translate(-50%, -50%);
        }
        .pointLineL {
          display: inline-block;
          height: 1px;
          width: 50%;
          position: absolute;
          background: #e0e0e0;
          top: 50%;
          right: 0;
        }
        .pointLineB {
          display: inline-block;
          height: 1px;
          width: 100%;
          position: absolute;
          background: #e0e0e0;
          top: 50%;
          right: 0;
        }
        .pointLineR {
          display: inline-block;
          height: 1px;
          width: 50%;
          position: absolute;
          background: #e0e0e0;
          top: 50%;
          left: 0;
        }
      }
    }
    >div:nth-of-type(3) {
      padding-bottom: .3rem;
      display: inline-block;
      width: 5.55rem;
      span {
        font-size: .24rem;
        color: #666666;
        display: inline-block;
        width: 33.33%;
        height: 100%;
      }
      span:nth-of-type(1) {
        text-align: left;
      }
      span:nth-of-type(2) {
        text-align: center;
      }
      span:nth-of-type(3) {
        text-align: right;
      }
    }
  }

  .divwarpper {
    background: #fff;
    padding: .3rem 0 .3rem .3rem;
    font-size: 0;
    >span {
      display: inline-block;
    }
    >span:nth-of-type(1) {
      width: 2.2rem;
      color: #bebebe;
      font-size: .28rem;
      text-align: left;
      vertical-align: top;
    }
    >span:nth-of-type(2) {
      color: #666666;
      font-size: .28rem;
      width: 5rem;
      vertical-align: top;
      span {
        padding-top: .14rem;
        display: inline-block;
        color: #bebebe;
        font-size: .24rem;
        text-align: left;
        vertical-align: top;
      }
    }
  }
  .biaoListPro{
    margin-top: .1rem;
    .list{
      background: #fff;
      margin-top: .06rem;
      padding: 0 .3rem;
      height: .8rem;
      line-height: .8rem;
      color:rgb(136,136,136);
      font-size: .3rem;
      img {
        box-sizing: border-box;
        -moz-box-sizing: border-box; /* Firefox */
        -webkit-box-sizing: border-box; /* Safari */
        vertical-align: middle;
        width: .35rem;
        height: .36rem;
        &.more{
          float: right;
          margin-top: .25rem;
          width: .18rem;
          height: .36rem;
        }
      }
      span{
        margin-left: .12rem;
        height: .8rem;
        box-sizing: border-box;
        -moz-box-sizing: border-box; /* Firefox */
        -webkit-box-sizing: border-box; /* Safari */
        vertical-align: middle;
      }
    }
  }
  .waitao{
    background: #fff;
    padding: .07rem .35rem .07rem .33rem;
    font-size: 0;
    margin-top: 2px;
    .divwarpper1{
      background: #fff;
      height: .64rem;
      line-height: .64rem;
      >span {
        color:#aaaaaa;
        float: left;
      }
      >span:nth-of-type(1) {
        width: 0.32rem;
        color: #fff;
        font-size: .22rem;
        text-align: center;
        height: .32rem;
        line-height: .32rem;
        display: inline-block;
        background-color: #ff666b;
        border-radius: 50%;
        margin: 0.16rem .04rem 0 0;
      }
      >span:nth-of-type(2) {
        font-size: .24rem;
        width: 1.2rem;
        text-align: center;
      }
      >span:nth-of-type(3) {
        font-size: .24rem;
        width: 1.74rem;
        text-align: center;
      }
      >span:nth-of-type(4) {
        font-size: .24rem;
        width: 3.33rem;
        text-align: left;
        padding-left: .17rem;
        span{
          color: #ff666b;
          font-size: .24rem;
        }
      }
      &.divwarpper1:nth-of-type(2){
        >span:nth-of-type(4) {
          line-height: .32rem !important;
          span{
            line-height: .32rem !important;
          }
        }
      }
    }
  }

  .line {
    display: none;
    text-align: right;
    font-size: 0;
    background: rgb(67,178,247);
    div {
      display: inline-block;
      width: 7rem;
      border-top: 1px solid #d9d9d9;
    }
  }
  .hongbaoGlass {
    width: 100%;
    height: 9.65rem;
    background: #fff;
    z-index: 6;
    position: fixed;
    bottom: 0;
    left: 0;
    overflow: hidden;
    .hongbaoTitle {
      text-align: center;
      font-size: .38rem;
      color: #333333;
      position: relative;
      height: 1.1rem;
      line-height: 1.1rem;
      border-bottom: 1px solid #d9d9d9;
      span {
        position: absolute;
        right: .25rem;
        top: 0;
        font-size: .3rem;
        color: #44b2f7;
      }
    }
    .bankTitle {
      text-align: center;
      font-size: .38rem;
      color: #333333;
      position: relative;
      height: 1.1rem;
      line-height: 1.1rem;
      border-bottom: 1px solid #d9d9d9;
      i {
        display: inline-block;
        width: .5rem;
        height: .5rem;
        background: url('../../../static/assets/closePop.png') no-repeat 50% 50%;
        background-size: 100%;
        float: left;
        position: absolute;
        top: .3rem;
        left: .3rem;
      }
    }
    .bankList {
      margin-left: .3rem;
      border-bottom: 1px solid #d9d9d9;
      padding: .35rem .3rem .35rem 0;
      span:nth-of-type(1) {
        float: left;
        font-size: .3rem;
        color: #afafaf;
      }
      span:nth-of-type(2) {
        float: right;
        color: #333333;
        font-size: .3rem;
      }
    }
    .buydetailHongbaolist {
      margin-top: .2rem;
      height: 7.5rem;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      .hongbaodetail {
        width: 6.9rem;
        height: 2.2rem;
        margin: 0 auto .2rem auto;
        position: relative;
        .hongbaoNumber {
          float: left;
          width: 50%;
          display: inline-block;
          padding-left: .4rem;
          padding-top: .3rem;
          div:nth-of-type(1) {
            font-size: .29rem;
            padding-bottom: .2rem;
          }
          div:nth-of-type(2) {
            font-size: .66rem;
            span {
              font-size: .34rem;
            }
          }
        }
        .hongbaoNotice {
          float: right;
          width: 50%;
          padding-top: .3rem;
          font-size: 0;
          div {
            padding-bottom: .2rem;
            i {
              display: inline-block;
              width: 4px;
              height: 4px;
              border-radius: 50%;
              background: #666666;
              margin-right: .1rem;
            }
            span {
              font-size: .22rem;
              color: #666666;
            }
          }
        }
        .hongbaoTime {
          position: absolute;
          bottom: 0.2rem;
          width: 100%;
          font-size: 0;
          padding-left: .4rem;
          padding-right: .6rem;
          span {
            font-size: .24rem;
            color: #999;
            a {
              color: #999;
            }
          }
          span:nth-of-type(1) {}
          span:nth-of-type(2) {
            float: right;
          }
        }
      }
      .hongbaoFoot {
        color: #797979;
        font-size: .32rem;
        text-align: center;
        padding: .4rem 0;
        width: 6.9rem;
        margin: 0 auto;
        border: 1px solid #d9d9d9;
        position: relative;
        margin-bottom: .4rem;
        i {
          width: .36rem;
          height: .36rem;
          background: url('../../../static/assets/nohongbao.png') no-repeat 50% 50%;
          display: inline-block;
          position: absolute;
          top: .38rem;
          left: 2rem;
        }
      }
      .canUse {
        background: url('../../../static/assets/hongbaoCanUseBG1.png') no-repeat 50% 50%;
        background-size: 100%;
        .hongbaoNumber {
          color: #35a0e4;
        }
      }
      .noUse {
        background: url('../../../static/assets/hongbaoNoUseBG1.png') no-repeat 50% 50%;
        background-size: 100%;
        .hongbaoNumber {
          color: #dbdbdb;
        }
      }
      .checkActive {
        background: url('../../../static/assets/hongbaoActiveBG.png') no-repeat 50% 50% !important;
        background-size: 100% !important;
      }
    }
    .hongbaoBar {
      font-size: 0;
      border-bottom: 1px solid #d9d9d9;
      position: relative;
      >span {
        display: inline-block;
        text-align: center;
        width: 50%;
        font-size: 0;
        color: #c0c0c0;
        margin: .3rem 0;
      }
      >span:nth-of-type(1) {
        border-right: 1px solid #d9d9d9;
        i {
          display: inline-block;
          width: .38rem;
          height: .26rem;
          vertical-align: middle;
          margin-right: .05rem;
        }
        span {
          vertical-align: middle;
          font-size: .28rem;
        }
        .fontactive {
          color: #44b2f7;
        }
        .normal {
          background: url('../../../static/assets/cash.png') no-repeat 50% 50%;
          background-size: 100%;
        }
        .active {
          background: url('../../../static/assets/cashactive.png') no-repeat 50% 50%;
          background-size: 100%;
        }
      }
      span:nth-of-type(2) {
        i {
          display: inline-block;
          width: .38rem;
          height: .26rem;
          vertical-align: middle;
          margin-right: .05rem;
        }
        span {
          vertical-align: middle;
          font-size: .28rem;
        }
        .fontactive {
          color: #44b2f7;
        }
        .normal {
          background: url('../../../static/assets/jiaxi.png') no-repeat 50% 50%;
          background-size: 100%;
        }
        .active {
          background: url('../../../static/assets/jiaxiactive.png') no-repeat 50% 50%;
          background-size: 100%;
        }
      }
      .hongbaoline {
        display: inline-block;
        height: 2px;
        background: #44b2f7;
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 50%;
        transition: left .3s;
      }
      .hongbaoline50 {
        left: 50%;
      }
    }
  }
  .nohaveHongbao {
    font-size: 0;
    padding-top: 1.7rem;
    i {
      display: block;
      width: 3.37rem;
      height: 2.25rem;
      margin: 0 auto;
      background: url('../../../static/assets/donthaveHongbao.png') no-repeat 50% 50%;
    }
    div {
      text-align: center;
      font-size: .28rem;
      padding-top: .3rem;
      color: #7e7e7e;
    }
  }
  .chargeGlass {
    background: #fff;
    padding: .3rem .3rem .3rem 0;
    font-size: 0;
    margin-left: .3rem;
    border-bottom: 1px solid #d9d9d9;
    .chargeGlass-1 {
      font-size: .28rem;
      color: #666;
      vertical-align: middle;
    }
    .chargeGlass-2 {
      margin-left: .9rem;
      font-size: .3rem;
      color: #333;
      vertical-align: middle;
    }
    .chargeGlass-3 {
      font-size: .2rem;
      color: #fff;
      background: #ed7a00;
      text-align: center;
      float: right;
      width: .78rem;
      height: .28rem;
      line-height: 1.5;
    }
    .chargeGlass-4 {
      display: inline-block;
      vertical-align: middle;
      i {
        display: inline-block;
        width: .51rem;
        height: .5rem;
        /*background: url('../../../static/assets/bank-icon.png') no-repeat 50% 50%;
        background-size: 100%;*/
        float: left;
        position: relative;
        top: .1rem;
        right: .1rem;
      }
    }
    .chargeGlass-7 {
      float: right;
      .chargeGlass-5 {
        font-size: .3rem;
        color: #666666;
        margin-bottom: .15rem;
        span {
          margin-left: .2rem;
          font-size: .24rem;
        }
      }
      .chargeGlass-6 {
        font-size: .24rem;
        color: #afafaf;
      }
    }
  }
  .buyBTN {
    text-align: center;
    div {
      display: inline-block;
      margin: .3rem 0 0 0;
      width: 6.9rem;
      height: .96rem;
      border-radius: 15px;
      background: #9ed5f8;
      color: #fff;
      text-align: center;
      font-size: .36rem;
      line-height: .96rem;
    }
  }

  .blueBTN {
    background: #44b2f7 !important;
  }
  .dealPasswordInput {
    font-size: 0;
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    z-index: 1;
    background: #fff;
    padding-bottom: 1.14rem;
    z-index: 6;
    .dealpasswordCloseAndTitle {
      text-align: left;
      border-bottom: 1px solid #d9d9d9;
      padding: .38rem;
      margin-bottom: 1.14rem;
      i {
        display: inline-block;
        background: url('../../../static/assets/dealpasswordClose.png') no-repeat 50% 50%;
        width: .48rem;
        background-size: 100%;
        height: .46rem;
        vertical-align: middle;
      }
      span {
        color: #333333;
        font-size: .38rem;
        vertical-align: middle;
        padding-left: 1.58rem;
      }
    }
    .inputflag {
      position: relative;
      overflow: hidden;
      display: inline-block;
      width: 6.9rem;
      height: 1.17rem;
      border: 2px solid #aaaaaa;
      border-radius: 10px;
      #forinput {
        height: 50%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
      div {
        float: left;
        display: inline-block;
        width: 16.6%;
        height: 100%;
        background-color: #Fff;
        border-right: 1px solid #eaeaea;
        position: relative;
        span {
          display: inline-block;
          background: url(../../../static/assets/point.png) no-repeat 50% 50%;
          background-size: 75%;
          width: .3rem;
          height: .3rem;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
      div:last-child {
        border: none;
      }
    }
    .forget {
      font-size: .26rem;
      float: right;
      position: relative;
      top: .3rem;
      right: .3rem;
      color: #ed7900;
    }
  }
  .form-radio {
    font-size: 0;
    margin-top: .4rem;
    text-align: center;
    i {
      display: inline-block;
      width: .32rem;
      height: .32rem;
      vertical-align: middle;
      margin: 0 .16rem 0 .3rem;
    }
    .radioerror {
      background: url(../../../static/assets/radio.png) no-repeat 50% 50%;
      background-size: 100%;
    }
    .radioright {
      background: url(../../../static/assets/radio-right.png) no-repeat 50% 50%;
      background-size: 100%;
    }
    >span {
      font-size: .28rem;
      font-weight: bold;
      vertical-align: middle;
      >span {
        color: #ed7900;
      }
    }
  }
</style>
